<template>
  <div class="classify">
    <div class="search">
      <div class="search-div">
        <div class="img"></div>
        <div class="tip"></div>
      </div>
    </div>
    <div class="dividing"></div>
    <div class="contain">

      <div class="right">
        <div class="right-list"
             @click="clickItem(item)"
             :key="index"
             v-for="(item, index) in this.page.list">
          <div class="right-contain">
            <div class="img">
              <img :src="item.img">
            </div>
            <div class="contain-center">
              <div class="title maxLine2">{{item.pdname}}</div>
              <div class="price">{{item.psprice | math-mul(item.discount) | math-round(2,1) | math-money}}</div>
            </div>
            <div class="shopcat"
                 @click.stop="clickShopCat(item)">
              <div class="shopcat-img"></div>
            </div>
          </div>
          <div class="right-dividing"></div>
        </div>
        <error-page :imgWidth="257"
                    :imgHeight="295"
                    top="95"
                    emptyImg="empty-shopcat"
                    :type="'text'"
                    :zIndex="0"
                    emptyDesc="<span style='color:RGBA(153, 153, 153, 1);font-size:0.30rem'>没有搜索到任何东东...</span>"
                    class="absolute-clazz"
                    v-if="page.loaded && page.list.length === 0" />
        <span class="loadding-end"
              ref="end"
              v-if="page.loaded && !page.more > 0">木有啦,滑到最后了~</span>

        <div class="loadding-up"
             v-if="(page.loading && page.more)&&page.list.length > 0">
          <div class="loadding-up-div"></div>
        </div>
      </div>
    </div>
    <buy-picker :detailData="detailData"
                v-model="showBuyPicker"
                :type="buyType"></buy-picker>
    <search :showHistory.sync="showHistory"
            @hideSearch="hideSearch"
            :totalProductCountText="haveGoodsCount"
            :defaultStr="$route.query.searchResult || ''"
            @subSearchData="subSearchData"></search>
    <home-nav></home-nav>
  </div>
</template>

<script>
import mixins from '@/mixins'
import HomeNav from '@/components/home-nav'
import pageList from '@/components/common-js/page-list'
import buyPicker from '@/components/buy-picker'
import ErrorPage from '@/components/error-page'
import Search from './search'
export default {
  name: 'classify',
  mixins: [mixins, pageList],
  data () {
    return {
      tempObj: {
        img: '',
        title: '多太美肤套装',
        price: 444
      },
      rightList: [],
      url: '/tProduct/list.json',
      searchData: {
        pdname: ''
      },
      detailData: {},
      buyType: 0,
      showBuyPicker: false,
      showHistory: false,
      totalProductCount: 0
    }
  },
  watch: {
  },
  computed: {
    haveGoodsCount () {
      return `商品搜索，共${this.totalProductCount}款好物`
    }
  },
  async mounted () {
    this.pull()
    this.requestCountNet()
    let defaultStr = this.$route.query.searchResult
    this.requestNetList(defaultStr || '')
  },
  methods: {
    async requestCountNet () {
      let productCount = await this.$ajax.get('/tProduct/productcount.json')
      this.totalProductCount = productCount.result
    },
    subSearchData (val) {
      this.requestNetList(val)
    },
    async clickShopCat (item) {
      this.detailData = await this.$ajax.get('/tProduct/detail.json', {
        pdid: item.pdid
      })
      this.showBuyPicker = true
    },
    hideSearch () {
      this.$router.back()
    },
    clickItem (item) {
      this.$router.push({name: 'productdetails', query: {pdid: item.pdid}})
    },
    // 获取右边数据
    async requestNetList (val) {
      this.searchData.pdname = val
      await this.loadPageList(this.url, true)
    },
    pull () {
      let self = this
      this.observer = new IntersectionObserver(function (val) {
        if (val[0].isIntersecting) {
          self.loadPageList(this.url)
        } else {
        }
      })
      this.$nextTick(() => {
        this.$refs.end && this.observer.observe(this.$refs.end)
      })
    }
  },
  components: {
    HomeNav,
    buyPicker,
    ErrorPage,
    Search
  }
}
</script>


<style lang="stylus" scoped>
.classify {
  height: 93vh;
  display: flex;
  flex-direction: column;

  .search {
    width: 100%;
    height: 90px;
    padding-left: 36px;
    padding-right: 36px;
    padding-top: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;

    .search-div {
      width: 100%;
      height: 56px;
      background: rgba(234, 235, 237, 1);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      .img {
        background-image: url('~@image/icon-search.png');
        background-size: 32px 32px;
        width: 32px;
        height: 32px;
        margin-right: 6px;
        background-repeat: no-repeat;
      }

      .tip {
        font-size: 26px;
        color: rgba(153, 153, 153, 1);
      }
    }
  }

  .dividing {
    width: 100%;
    height: 1px;
    background: rgba(220, 220, 220, 1);
  }

  .contain {
    flex: 1;
    display: flex;

    .right {
      flex: 1;
      background: white;
      height: 100%;
      position: relative;

      .absolute-clazz {
        position: absolute;
      }

      .right-list {
        .right-contain {
          display: flex;
          margin-top: 15px;
          margin-bottom: 15px;

          .img {
            margin-left: 14px;
            width: 160px;
            height: 160px;

            img {
              width: 160px;
              height: 160px;
            }
          }

          .contain-center {
            margin-left: 20px;
            display: flex;
            flex-direction: column;

            .title {
              margin-top: 11px;
              font-size: 32px;
              color: rgba(51, 51, 51, 1);
            }

            .price {
              margin-bottom: 13px;
              flex: 1;
              display: flex;
              align-items: flex-end;
              font-size: 28px;
              color: rgba(227, 20, 54, 1);
            }
          }

          .shopcat {
            flex: 1;
            align-items: flex-end;
            display: flex;
            justify-content: flex-end;
            height: 160px;

            .shopcat-img {
              width: 33px;
              height: 27px;
              background-image: url('~@image/icon-addshopcat.png');
              background-size: 33px 27px;
              background-repeat: no-repeat;
              margin-right: 40px;
              margin-bottom: 13px;
            }
          }
        }

        .right-dividing {
          margin-left: 9px;
          margin-right: 18px;
          background: rgba(220, 220, 220, 1);
          height: 1px;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
